<template>
	<BaseContainer>
		<template #left>
			<el-scrollbar max-height="80vh">
				<el-tabs v-model="activeName" class="demo-tabs" tabPosition="left" @tab-change="handleClick">
					<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name"> </el-tab-pane>
				</el-tabs>
			</el-scrollbar>
		</template>
		<component
			style="width: calc(100% - 10px)"
			v-if="activeItemObj.api"
			:is="whichComm[activeName]"
			v-bind="$attrs"
			:api="activeItemObj.api"
			:auth="{ ...activeItemObj.api, ...hideAuthBtn }"
			:showMenu="true"
			:isWithAuth="props.isWithAuth"
		></component>
		<component v-else :is="whichComm[activeName]" v-bind="$attrs" :isWithAuth="props.isWithAuth"></component>
	</BaseContainer>
</template>

<script setup lang="ts">
import { whichComm } from './config'
type Props = {
	isWithAuth?: any
}
let props = withDefaults(defineProps<Props>(), {
	isWithAuth: undefined,
})

const router = useRouter()
const route = useRoute()

const activeName = ref(route.query.type || 'HospitalRecord') as any
const activeItemObj = computed(() => {
	return tabs.find((item: any) => item.name === activeName.value)
})

const hideAuthBtn = {
	add: 'hide',
	edit: 'hide',
	delete: 'hide',
	HandleForm: 'hide',
	spotCheck: 'hide',
	resultOkBtn: 'hide',
	resultNoBtn: 'hide',
	checkOut: 'hide',
	leave: 'hide',
}
const tabs: any = [
	// {
	// 	label: '老人在院记录',
	// 	name: 'admissionManagement',
	// 	api: { index: 'view_dpElderlyCheckinManage_page' },
	// },
	{ label: '老人入院记录', name: 'HospitalRecord' },
	{ label: '指静脉打卡记录', name: 'fingerRecords' },
	{ label: '请假离院记录', name: 'ElderlyLeaveRecord' },
	{ label: '老人退院记录', name: 'CheckoutRecord' },
	{ label: '护理服务记录', name: 'NursingRecord' },
	{ label: '老人打卡记录', name: 'OldmanClock' },
	{ label: '老人缴费记录', name: 'PaymentRecord' },
	{ label: '老人账单记录', name: 'ReceiveRcord' },
	{ label: '员工打卡记录', name: 'EmployeeClock' },

	{
		label: '视频监控设备管理',
		name: 'monitorteDevice',
		api: { index: 'pbVideoSurveillance_page' },
	},
	{
		label: '智能设备管理',
		name: 'intelligenceDevice',
		api: { index: 'dotEquipment_page' },
	},
	{
		label: '设备维护记录',
		name: 'Maintenance',
	},
	{
		label: '灭火器管理',
		name: 'fireExtinguisher',
		api: { index: 'pbFire_page' },
	},
	{
		label: '呼吸器管理',
		name: 'respirator',
		api: { index: 'pbRespirator_page' },
	},
	{
		label: '物资管理',
		name: 'goods',
		api: { index: 'pbMaterialManage_page' },
	},
	{
		label: '日常防火巡查记录',
		name: 'fireInspecte',
		api: { index: 'ffDailyFireInspection_page' },
	},
	{
		label: '月度防火巡查记录',
		name: 'monthlyFireInspecte',
		api: { index: 'ffMonthlyFireInspection_page' },
	},
	{
		label: '消防维护记录',
		name: 'maintenance',
		api: { index: 'ffMaintenance_page' },
	},
	{
		label: '消防演练记录',
		name: 'fireDrill',
		api: { index: 'pbFireDrill_page' },
	},
	{
		label: '消防安全教育培训记录',
		name: 'safetyEduTrain',
		api: { index: 'pbFireEducation_page' },
	},
	{
		label: '消防设施全面检测记录',
		name: 'facilityTest',
		api: { index: 'pbFireFighting_page' },
	},
	{
		label: '报警记录',
		name: 'callPolice',
		api: { index: 'pbAlarm_page' },
	},
	{
		label: '预警记录',
		name: 'earlyWarn',
		api: { index: 'pbAlarm_page' },
	},
	{
		label: '报警调度记录',
		name: 'dispatch',
		api: { index: 'pbDispatch_page' },
	},
	{
		label: '隐患评估记录',
		name: 'orgTask',
		api: { index: 'pbHazardAssessment_page' },
	},
	{
		label: '食品留样记录',
		name: 'FoodSamples',
	},
	// {label: "食品留样记录", name: "foodSample", api: { index: 'view_smFoodSamples_page' }},
	{
		label: '出入院扫码登记记录',
		name: 'assessList',
		api: { index: 'pbMemberAssess_page' },
	},
	{
		label: '家属预约探视登记记录',
		name: 'appointList',
		api: { index: 'pbOldmanAppointment_page' },
	},
	{
		label: '家属预约老人出院记录',
		name: 'appointOutList',
		api: { index: 'pbOldmanAppointment_page' },
	},

	{
		label: '消防巡查记录',
		name: 'PatrolRcord',
	},

	{ label: '设备报警处理记录', name: 'EquipWarn' },
	{ label: '活动记录', name: 'OrgActivityRecord' },
	{ label: '设备管理', name: 'EquipAdmin' },
	{ label: '设备检查记录', name: 'EquipCheckRecord' },
	{ label: '疫情防控数据', name: 'PreventRecord' },

	{ label: '床态图', name: 'BedState' },
]

const handleClick = (tab) => {
	router.replace({
		path: route.path,
		query: {
			type: tab,
		},
	})
}
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
	background: rgba(0, 0, 0, 0) !important;
}
</style>
